function insCommodity() {
    $.ajax({
        url:'/admin/typeList',
        type:'get',
        dataType:'json',
        success: function (res) {

            let str=``;
            for (let i=0;i<res.length;i++){
                str+=`
                    <option value="${res[i].id}">${res[i].type}</option>
                `
            }
            $('#box').html(`
        <!-- /Page Header -->
        <div style="height:100px"></div>
        <div class="row">
          <div class="col-sm-12">
            <div class="card">
              <div class="card-body">
                <form onsubmit="return false" id="form1"  name="from" enctype="multipart/form-data">
                  <div class="row">
                    <div class="col-12">
                      <h5 class="form-title"><span>请输入商品信息</span></h5>
                    </div>
                    <div class="col-12 col-sm-6">
                      <div class="form-group">
                        <label>商品样图</label>
                        <input type="file" name="multipartFile" accept="image/*">
                      </div>
                    </div>
                    
                    <div class="col-12 col-sm-6">
                      <div class="form-group">
                        <label>商品名称</label>
                        <input type="text" name="name">
                      </div>
                    </div>
                  
                    <div class="col-12 col-sm-6">
                      <div class="form-group">
                        <label>商品描述</label>
                        <input type="text" name="details">
                      </div>
                    </div>
                    
                    
                    <div class="col-12 col-sm-6">
                      <div class="form-group">
                        <label>商品价格</label>
                        <input type="text" name="price">
                      </div>
                    </div>
                    <div class="col-12 col-sm-6">
                      <div class="form-group">
                        <label>商品类型</label>
                        <select type="text" name="type" id="typeSelection">
                        ${str}
                        </select>
                      </div>
                    </div>
                    <div class="col-12 col-sm-6">
                      <div class="form-group">
                        <label>商品数量</label>
                        <input type="text" name="flag">
                      </div>
                    </div>
                    <div class="col-12">
                      <button type="submit" class="btn btn-primary" onclick="doInsCommodity()">添加</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
    `)
        }
    })
}
function doInsCommodity() {
    var form = $('#form1')[0];
    var formData = new FormData(form);
    $.ajax({
        url: '/admin/insCommodity',
        type: 'post',
        data:formData,
        processData: false, // 告诉jQuery不要处理数据
        contentType: false, // 告诉jQuery不要设置Content-Type请求头
        success:function (res) {
            alert("修改成功")
        }
    })
}
function commodityList() {
    $.ajax({
        url:'/admin/commodityList',
        type:'get',
        dataType: 'json',
        success:function (res) {
            console.log(res)

            let str=``;
            let rs='';
            for (let i=0;i<res.length;i++){
                if (res[i].recommend==0){
                    rs='未推荐'
                }else {
                    rs='已推荐'
                }
                str+=`
                    <tr>  
                        <td>${res[i].id}</td>
                        <td><img src="${res[i].img}" alt="" style="width: 60px;height: 40px"></td>
                        <td>${res[i].name}</td>
                        <td>${res[i].price}</td>
                        <td><input type="button" onclick="changeRecommend(${res[i].id},${res[i].recommend})" value="${rs}" style="background-color: #1db9aa"></td>
                        <td>${res[i].flag}</td>
                        <td><input type="button" value="删除" onclick="removeCommodity(${res[i].id})"></td>
                    </tr>
                `
            }
            $('#box').html(`
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

table, th, td {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f5f5f5;
}

tr:hover {
  background-color: #e9e9e9;
}

</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>海报</th>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>明星推荐</th>
      <th>库存</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    ${str}
  </tbody>
</table>

</body>
</html>
    `);
        }
    })
}

function removeCommodity(id) {
    $.ajax({
        url:'/admin/removeCommentById/'+id,
        type:'delete',
        success:function () {
            commodityList()
        }
    })
}

function changeRecommend(commodityId,recommend){
    if (recommend==1){
        recommend=0
    }else {
        recommend=1
    }
    $.ajax({
        url:`/admin/changeRecommend/${commodityId}/${recommend}`,
        type:'get',
        success:function () {
            commodityList()
        }
    })
}

function recommendList() {

    $.ajax({
        url:'/admin/recommendList',
        type:'get',
        dataType: 'json',
        success:function (res) {
            console.log(res)

            let str=``;
            let rs='';
            for (let i=0;i<res.length;i++){
                if (res[i].recommend==0){
                    rs='未推荐'
                }else {
                    rs='已推荐'
                }
                str+=`
                    <tr>  
                        <td>${res[i].id}</td>
                        <td><img src="${res[i].img}" alt="" style="width: 60px;height: 40px"></td>
                        <td>${res[i].name}</td>
                        <td>${res[i].price}</td>
                        <td><input type="button" onclick="changeRecommend(${res[i].id},${res[i].recommend})" value="${rs}" style="background-color: #1db9aa"></td>
                        <td>${res[i].flag}</td>
                        <td><input type="button" value="删除" onclick="removeCommodity(${res[i].id})"></td>
                    </tr>
                `
            }
            $('#box').html(`
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

table, th, td {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f5f5f5;
}

tr:hover {
  background-color: #e9e9e9;
}

</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>海报</th>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>明星推荐</th>
      <th>库存</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    ${str}
  </tbody>
</table>

</body>
</html>
    `);
        }
    })
}